移动H5使用AntV中的F2 |
您所在的位置：网站首页 › f2 可视化 › 移动H5使用AntV中的F2 |
|
数据可视化插件——AntV
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践 平常开发中大家都会接触一些数据可视化工具，常用的echarts，Highcharts，D3等。 个人觉得AntV的UI好看一些，再加上F2是移动端可视化方案，所以就有了接下来的爬坑过程。 开始使用vue项目开发，我写的是折线面积图+滑动 下载 npm install @antv/f2 --save 直接引入就ok const F2 = require('@antv/f2');开始画图 创建canvas,指定id 开始绘制 // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。 const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ]; // Step 1: 创建 Chart 对象 const chart = new F2.Chart({ id: 'myChart', pixelRatio: window.devicePixelRatio // 指定分辨率 }); // Step 2: 载入数据源 chart.source(data); // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴 chart.interval().position('genre*sold').color('genre'); // Step 4: 渲染图表 chart.render();嘿嘿，都是copy官网的 相关API使用最常用的，毕竟其他的我也不会 Axis-坐标轴配置 这个我主要用来自定义X轴Y轴内容。 就那这个数据来举例吧 list: [ {"date": "2018-08-08","record": 166}, {"date": "2019-01-01","record": 174}, {"date": "2019-01-02","record": 166}, {"date": "2019-01-03","record": 166}, {"date": "2019-01-05","record": 187}, {"date": "2019-01-06","record": 189}, {"date": "2019-01-17","record": 156}, {"date": "2019-04-18","record": 231} ] //date为X轴，record Y轴 chart.axis('date', { label: function label(text, index, total) { var cfg = { textAlign: 'center',//定义样式 }; if (index === 0) { cfg.textAlign = 'start'; cfg.text = '+' + text;//可以更改X轴数据格式等 cfg.fill = '#F5222D';//文字颜色 } if (index > 0 && index === total - 1) { cfg.textAlign = 'end'; } return cfg; } }); //定义X轴Y轴 var defs = { date: { type: 'timeCat',//类型为日期 mask: 'YY/MM/DD',//日期格式 tickCount: 4,//区间，写几就有几个区间 }, record: { tickCount: 5, min: 0,//轴的最小值&最大值 alias: '身高'//定义这个轴是啥类型 } }; chart.source(this.list, defs);//载入数据 tooltip-自定义提示 这一块没有研究透彻，自己看看吧链接 chart.tooltip(false)//直接关闭，没任何提示 chart.tooltip({ showItemMarker: false, onShow: function onShow(ev) { //自定义提示内容 var items = ev.items; items[0].name = null; items[0].name = items[0].title; items[0].value = items[0].value + "%"; } }); guide chart.guide().text({ position: ['min', 'max'], content: '提示', style: { textBaseline: 'middle', textAlign: 'start' }, offsetY: -23, offsetX: -25 });就是这个东西 image.png 线，面积，点 //先X轴后Y轴 chart.line().position("date*record").color("#FFB024");//线 chart.area().position("date*record").style({fillStyle: "l(90) 0:rgba(255,202,106,1) 1:rgba(255,201,104,0.3)",fillOpacity: 1});//面积渐变色 chart.point().position('date*record').color('red');//点 滑动+滚动条手机上看图，如果X轴数据过多，都堆一起了，所以就用滑动了 //引入 const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar"); const pan = require("@antv/f2/lib/interaction/pan"); //注册 var chart = new F2.Chart({ id: 'myChart', pixelRatio: window.devicePixelRatio, plugins: [ScrollBar, pan] }); //官网用法 //X轴为1955-2015，5年一个区间，载入数据都时候定义一个最大最小都区间 chart.source(data, { release: { min: 1990, max: 2010 } }); chart.interaction('pan'); // 定义进度条 chart.scrollBar({ mode: 'x', xStyle: { offsetY: -5 } }); 我的写法 //因为我们X轴日期格式为2019-01-01这种 换算了一下 当数据大于五条当时候开始滑动 const a = 1000000000 var dataMap = data.map((item, index) => { return { date: index + a, record: item.record } }) var min = a, max = a + 4, tickCount = 5; if (dataMap.length > 5) { tickCount = 5; chart.scrollBar({ mode: "x", xStyle: { backgroundColor: "#e8e8e8", fillerColor: "#808080", offsetY: -2 } }); chart.interaction("pan"); }else if(dataMap.length == 1){ max = a; tickCount = 2; chart.point().position("date*record").color("#FFB024"); }else{ max = dataMap.length +a -1 tickCount = dataMap.length; } chart.source(dataMap,{ date: { min:min, max:max, tickCount:tickCount } }) chart.axis('date', { label: function label(text, index, total) { const cfg = { textAlign: 'center' } cfg.text = data[text-a].date return cfg; } }); 结语第一次发文章，可能不是太好，希望大家喜欢，原谅我不会弄动图，所以没放效果图。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |